<template>
  <el-row>
    <el-container>
      <el-aside>
        <div class="col-3">
          <h3>分类</h3>
          <draggable
            class="dragArea list-group"
            :list="list1"
            :group="{name: 'tab'}"
          >
            <div class="list-group-item" v-for="element in list1" :key="element.id">
              <el-button>{{ element.name }}</el-button>
            </div>
          </draggable>
        </div>
        <div class="col-3">
          <h3>行为</h3>
          <draggable
            class="dragArea list-group"
            :list="list2"
            :options="{group:'action',disabled: disabledOld}"
          >
            <div class="list-group-item" v-for="element in list2" :key="element.id">
              <el-button style="width: 100px">{{ element.name }}</el-button>
            </div>
          </draggable>
        </div>

      </el-aside>
      <el-main>
        <el-row>
          <el-col :span="12">
            <h3>VIEW</h3>
            <div style="border:2px solid red; height: 660px; width: 350px">
              <div style="border:2px solid red; height: 200px;"></div>
              <div style="border:2px solid red; height: 60px;">
                <draggable class="dragArea list-group" :list="viewInfo.tablist" group="tab"
                           @choose="onChooseTab" @remove="onremoveTab">
                  <div class="list-group-item" v-for="tab in viewInfo.tablist" :key="tab.id"
                       style="float:left;">
                    <el-button>{{ tab.name }}</el-button>
                  </div>
                </draggable>
              </div>
              <div style="border:2px solid red; height: 400px;">
                <draggable class="dragArea list-group" :list="viewInfo.actionlist" group="action"
                           @add="onAddAction"
                           @choose="onChooseAction" @remove="onremoveAction">
                  <div class="list-group-item" v-for="tab in viewInfo.actionlist" :key="tab.id">
                    <el-button style="width: 240px">{{ tab.name }}</el-button>
                  </div>
                </draggable>
              </div>
            </div>
          </el-col>
          <el-col :span="12" v-show="tabIsShow">
            <h3>Tab参数配置</h3>
            <el-form v-for="(tabForm, index) in viewInfo.tablist" :key="index" :model="tabForm"
                     size="small" label-width="90px" v-show="index == tabIndex ? true :false">
              <el-form-item label="tab名称" prop="name">
                <el-input v-model="tabForm.name" style="width: 370px;"/>
              </el-form-item>
            </el-form>
          </el-col>
          <el-col :span="12" v-show="actionIsShow">
            <h3>Action参数配置</h3>
            <el-form v-for="(actionForm, index) in viewInfo.actionlist" :key="index" :model="actionForm"
                     size="small"
                     label-width="90px"
                     v-show="index == actionIndex ? true :false"
            >
              <el-form-item label="action名称" prop="name">
                <el-input v-model="actionForm.name" style="width: 370px;"/>
              </el-form-item>
              <el-form-item label="是否开启打卡">
                <el-switch
                  v-model="actionForm.is_punch"
                  active-color="#13ce66"
                  inactive-color="#ff4949"
                  active-text="关闭"
                  inactive-text="开启">
                </el-switch>
              </el-form-item>
              <el-form-item label="开始时间">
                <el-input v-model="actionForm.name" style="width: 370px;"/>
              </el-form-item>
              <el-form-item label="结束时间">
                <el-input v-model="actionForm.name" style="width: 370px;"/>
              </el-form-item>
              <el-form-item label="分值">
                <el-input v-model="actionForm.score" style="width: 370px;"/>
              </el-form-item>
            </el-form>
          </el-col>
        </el-row>
      </el-main>
    </el-container>
  </el-row>
</template>

<script>
  import draggable from "vuedraggable";

  let idGlobal = 8;
  export default {
    name: "clone-on-control",
    display: "Clone on Control",
    instruction: "Press Ctrl to clone element from list 1",
    order: 4,
    components: {
      draggable,
    },
    data() {
      return {
        list1: [
          { name: "作息", id: 1, short: 'rest' },
          { name: "饮食", id: 2, short: 'diet' },
          { name: "微课", id: 3, short: 'seminar' },
        ],
        list2: [
          { name: "早起", id: 1, item: 'get_up' },
          { name: "睡眠", id: 2, item: 'sleep' },
          { name: "早餐", id: 3, item: 'breakfast' },
          { name: "午餐", id: 4, item: 'lunch' },
          { name: "晚餐", id: 5, item: 'supper' },
          { name: "微课", id: 6, item: 'seminar' },
        ],
        viewInfo: {
          tablist: [],
          actionlist: [],

        },
        controlOnStart: true,
        tabIsShow: false,
        actionIsShow: false,
        tabIndex: '',
        actionIndex: '',
        disabledOld: true,
        actionConf: [],
      };
    },
    methods: {
      clone({ name }) {
        return { name, id: idGlobal++ };
      },
      pullFunction() {
        return this.controlOnStart ? "clone" : true;
      },
      start({ originalEvent }) {
        this.controlOnStart = originalEvent.ctrlKey;
      },
      onChooseTab(evt) {
        const index = evt.oldIndex
        this.tabIndex = index
        this.disabledOld = false
        this.tabIsShow = true
      },
      /**
       * 删除tab
       */
      onremoveTab(evt) {
        const index = evt.oldIndex
        if (this.tabIndex == index) {
          this.disabledOld = true
        }
        this.actionConf = []
        this.tabIsShow = false
      },
      onAddAction(evt) {
        const index = evt.newIndex
        this.actionConf[index] = this.viewInfo.actionlist[index]
      },
      /**
       * 选择Action
       */
      onChooseAction(evt) {
        const index = evt.oldIndex
        this.actionIndex = index
        console.log(evt.oldIndex);

        this.actionIsShow = true;

      },
      onremoveAction(evt) {
        console.log(evt)

        this.actionIsShow = false;
      },

    },
  };
</script>
<style scoped></style>
